---
title: 커뮤니티 교육 콘텐츠
description: Astro를 배우고 구축하는 데 도움이 되는 커뮤니티 제작 튜토리얼, 가이드, 기사, 비디오를 찾아보세요!
i18nReady: true
---

import Badge from '~/components/Badge.astro';

Astro로 배우고 구축하는 데 도움이 될 수 있는 것들이 훨씬 더 많이 있습니다! Astro 커뮤니티에서 제작하고 유지 관리하는 교육 콘텐츠는 다음과 같습니다.

모든 링크는 외부 링크이며 Astro의 이전 버전을 기반으로 할 수 있습니다. 커뮤니티 콘텐츠의 날짜를 확인하고 이에 따라 프로젝트에 맞게 조정하세요.

더 많은 Astro 교육 콘텐츠를 보려면 [Astro 블로그](https://astro.build/blog/)를 확인하거나 [공식 Astro 뉴스레터](https://astro.build/newsletter/signup)에 가입하세요. 매달 최고의 커뮤니티 콘텐츠를 요약해 보세요.

## 강좌 및 튜토리얼

강좌와 튜토리얼은 새로운 개념을 가르치는 데 중점을 두고 있으며, 종종 연습이나 구축할 샘플 프로젝트를 포함합니다. 이는 새로운 개념을 배우고 자신만의 Astro 프로젝트를 작업하는 데 필요한 도구를 제공하는 좋은 방법입니다.

Astro에 대해 자세히 알아보려면 다음 강좌와 튜토리얼을 확인하세요.

### 입문 튜토리얼

  - [Astro 웹 프레임워크 집중 강좌](https://www.youtube.com/watch?v=e-hTm5VmofI) - freeCodeCamp
  - [20분 만에 진행되는 Astro 집중 강좌](https://www.youtube.com/watch?v=zrPVTf761OI) - Chris Pennington (전체 유료 과정: [Astro 알아보기](https://learnastro.dev/))
  - [Astro 3.0 집중 강좌](https://www.youtube.com/watch?v=qBOz6TpYAOg) - James Q Quick (전체 유료 과정: [Astro로 현대적인 웹사이트 구축](https://astrocourse.dev/))
  - [60분 만에 진행되는 Astro 집중 강좌](https://www.youtube.com/watch?v=NniT0vKyn-E) - @developedbyed
  - [Astro의 이해 (ebook)](https://www.ohansemmanuel.com/books/understanding-astro) - Ohans Emmanuel

  ### 동영상 튜토리얼

  - [Astro 빠른 시작 과정: SSR 블로그 구축](https://www.youtube.com/watch?v=XoIHKO6AkoM)
  - [Astro 3.x로 영화 애플리케이션을 만드는 방법](https://www.youtube.com/watch?v=Gvr4WhgfP0w)
  - [여러분은 콘텐츠 컬렉션을 실제로 이해하지 못했을 수도 있습니다...](https://www.youtube.com/watch?v=Fcw4c3wzm7I)
  - [Astro 및 Apprwrite를 사용하여 맞춤형 블로그 플랫폼 구축](https://www.youtube.com/watch?v=OERqwLy_reA)
  - [Astro JS 포트폴리오 집중 강좌](https://www.youtube.com/watch?v=TwWvNK0yHjI)
  - [Astro로 풀 스택 블로그 구축](https://egghead.io/courses/build-a-full-stack-blog-with-astro-7ffcf9ec)

## 레시피 및 가이드

커뮤니티 회원이 제공하는 Astro 프로젝트에 기능을 추가하는 방법에 대한 예시를 살펴보세요!

[Astro 레시피](/ko/recipes/)는 일반적으로 특정 작업의 실제 예시를 완료하는 과정을 독자에게 안내하는 짧고 집중적인 방법 가이드입니다. 레시피는 단계별 지침을 따라 Astro 프로젝트에 새로운 기능이나 동작을 추가할 수 있는 좋은 방법입니다!

다른 가이드에서는 이미지 사용이나 MDX 작업 등 콘텐츠 영역과 관련된 개념을 설명할 수도 있습니다.

:::tip[직접 추가하세요!]
Astro의 레시피를 작성해 보셨나요? [이 페이지를 편집](https://github.com/withastro/docs/edit/main/src/content/docs/ko/community-resources/content.mdx)하고 해당 섹션에 링크를 추가하세요!
:::

### CSS

- [Astro에서 UnoCSS 사용](https://www.elian.codes/blog/23-02-11-implementing-unocss-in-astro/)
- [Tailwind CSS를 사용하여 Astro에 다크 모드 추가](https://www.kevinzunigacuellar.com/blog/dark-mode-in-astro/)

### 인증

- [Lucia로 Github OAuth 추가](https://lucia-auth.com/tutorials/github-oauth/astro)
- [Lucia로 사용자 이름 및 비밀번호 인증 추가](https://lucia-auth.com/tutorials/username-and-password/astro)

### RSS

- [이미지를 가져올 때 동적 파일 이름을 사용하세요](https://vaihe.com/blog/astro/astro-dynamic-image-prop/)
- [Storyblok의 스토리를 사용하여 Astro에 RSS 피드 추가](https://straffesites.com/ko/blog/rss-feed-astro-storyblok)
- [RSS 피드에 데이터를 보내는 방법은 무엇입니까? Astro + RSS 가이드](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/)

### 이미지

- [Astro RSS 피드에 블로그 게시물 이미지 추가](https://webreaper.dev/posts/astro-rss-feed-blog-post-images/)
- [Astro 블로그용 Open Graph 이미지 생성](https://techsquidtv.com/blog/geneating-open-graph-images-for-astro/)

### 편집기 도구

- [Astro와 함께 작동하는 VSCode, ESLint, Prettier 가져오기](https://patheticgeek.dev/blog/astro-prettier-eslint-vscode)
- [Astro 및 Tailwind CSS와 Prettier 통합](https://straffesites.com/ko/blog/integrate-prettier-astro-tailwindcss)

### Markdown

- [Astro의 Markdown 제목으로 목차 작성](https://kld.dev/building-table-of-contents/)
- [Markdown 파일에서 런트를 제거하는 Remark 플러그인 만들기](https://eatmon.co/blog/remove-runts-markdown/)
- [구성 기반 콘텐츠 작성을 통해 Astro에서 효과적으로 초안 페이지 설정](https://akashrajpurohit.com/blog/set-up-draft-pages-efficiently-in-astro-with-configdriven-content-authoring/)

### 성능

- [Astro 빌드 향상: 빌드 후 HTML 파일 수정](https://straffesites.com/ko/blog/optimize-astro-html-post-build)
- [Astro로 마이크로 프런트엔드 설정](https://medium.com/@sergio.a.soria/setting-up-micro-frontends-with-astro-and-ecma-script-modules-137340d2c520)
- [Astro에서 ISR (증분적 정적 재생성)을 구현하는 방법](https://logsnag.com/blog/implementing-isr-in-astro)

### 유틸리티

- [Astro에서 tRPC 사용](https://www.thomasledoux.be/blog/using-trpc-astro-islands-react)
- [Sentry를 Astro와 통합](https://akashrajpurohit.com/blog/seamless-error-tracking-integrating-sentry-with-astro/)
- [Astro 및 Storyblok 프로젝트를 위한 현지화된 사이트맵 생성](https://straffesites.com/ko/blog/localized-sitemap-astro-storyblok)
- [Pagefind로 사이트에 검색 기능 추가](https://blog.otterlord.dev/posts/astro-search/)
- [Fuse.js를 사용하여 사이트에 검색 기능 추가](https://www.youtube.com/watch?v=XnV_2MWqAhQ)
- [Giscus를 사용하여 Astro 블로그에 댓글 섹션 추가](https://elazizi.com/posts/add-comments-section-to-your-astro-blog/)

### 국제화 및 현지화

- [Crowdin을 사용하여 Astro 웹사이트를 다국어로 만드는 방법: Astro 현지화 가이드](https://crowdin.com/blog/2023/06/21/astro-localization-and-i18n)
- [콘텐츠 컬렉션 및 하위 페이지에 대한 Astro의 경로 번역](https://www.webdesign-sopelnik.de/en/blog/translate-routes-for-astro-content-collections-or-subpages-with-trailingslash-and-base-support/)

### Astro DB
- [Astro DB로 방명록 생성하기](https://ryantrimble.com/blog/creating-a-guestbook-with-astro-db/)
- [Astro DB로 조회수 카운터를 구축하는 방법](https://www.vorillaz.com/astro-views)